<template>
	<view class="content">
		<view class="con_nav">
			<u-navbar is-back="false" border="false">
				<view class="nav_con" @click="showBack">
					<view class="nav_icon">
						<u-icon name="arrow-left" color="#afcefc" size="30"></u-icon>
					</view>
					<view>{{plantTitle}}</view>
				</view>
			</u-navbar>
		</view>
		<!-- 头部 -->
		<view class="helmet">
			<view class="devices">
				<view class="dev_snum">
					一车间
				</view>
			</view>
			<view class="dev_state">
				<view class="dev_icon">
					<image class="maxiconSize" src="@/static/device/wxinfo.svg" mode=""></image>
				</view>
				<view class="state_info">
					<view class="info_item">
						<view class="">
							海天注塑机
						</view>
						<view class="">
							设备名称
						</view>
					</view>
					<view class="info_item">
						<view class="">
							在用
						</view>
						<view class="">
							使用状态
						</view>
					</view>
					<view class="info_item">
						<view class="">
							SJ-G31K-02
						</view>
						<view class="">
							设备编号
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 主体部分 -->
		<view class="dev_tabs">
			<view class="tabs_nav">
				<u-tabs :list="list" :is-scroll="false" active-color="#0ccb82" inactive-color="#999999"
					:current="current" @change="tabChange"></u-tabs>
			</view>
			<!-- 信息总览 -->
			<view class="dev_info_item dev_msg" v-if="current==0">
				<view class="device_con">
					<view class="device_state">
						<view class="state_logo">
							<view class="">
								<image src="@/static/device/设备状态.svg" mode=""></image>设备状态
							</view>
							<view class="">
								正常
							</view>
						</view>
						<view class="device_img">
							<image src="@/static/device/shebei.png" mode=""></image>
						</view>
					</view>
					<view class="parameters">
						<DevTitle oneTle="常用参数" oneicon="../../static/device/参数.svg"></DevTitle>
						<view class="par_pre">
							<view class="">
								<view class="" style="margin-bottom: 40rpx;">
									<text class="pre_tle">负责人(Principal)</text>
									<text class="pre_peo">张绍刚</text>
								</view>
								<view class="">
									<text class="pre_tle">设备类别(Category)</text>
									<text class="pre_bra">管理用电子设备</text>
								</view>
							</view>
							<view class="pre_right">
								<view class="" style="margin-bottom: 40rpx;">
									<text class="pre_tle">部门(Department)</text>
									<text class="pre_peo">生产部</text>
								</view>
								<view class="">
									<text class="pre_tle">品牌(Brand)</text>
									<text class="pre_bra">海天</text>
								</view>
							</view>
						</view>
					</view>
					<view class="parameter_item">
						<DevTitle oneTle="编码信息" oneicon="../../static/device/点击.svg"></DevTitle>
						<view class="used_item">
							<view class="used_left">
								<view class="">设备编号：</view>
								<view class="">资产编号：</view>
								<view class="">序列号：</view>
								<view class="">电子标签码：</view>
							</view>
							<view class="used_right">
								<view class="">DEV2021000241</view>
								<view class="">TEST001</view>
								<view class="">231231231</view>
								<view class="">JIU9823918273</view>
							</view>
						</view>
					</view>
					<view class="parameter_item">
						<DevTitle oneTle="设备信息" oneicon="../../static/device/设备信息.svg"></DevTitle>
						<view class="used_item">
							<view class="used_left">
								<view class="">设备名称：</view>
								<view class="">设备类别：</view>
								<view class="">品牌：</view>
								<view class="">规格型号：</view>
								<view class="">供应商：</view>
								<view class="">购置日期：</view>
								<view class="">保修期至：</view>
								<view class="">启用日期：</view>
								<view class="">预计报废日期：</view>
							</view>
							<view class="used_right">
								<view class="">注塑机-M011</view>
								<view class="">管理用电子设备</view>
								<view class="">海天</view>
								<view class="">Fanuc</view>
								<view class="">海天机械</view>
								<view class="">2023-05-24</view>
								<view class="">2023-05-24</view>
								<view class="">2023-05-24</view>
								<view class="">2023-05-24</view>
							</view>
						</view>
					</view>
					<view class="parameter_item">
						<DevTitle oneTle="状态信息" oneicon="../../static/device/状态信息.svg"></DevTitle>
						<view class="used_item">
							<view class="used_left">
								<view class="">设备状态：</view>
								<view class="">使用状态：</view>
								<view class="">设备等级：</view>
								<view class="">完成时间：</view>
							</view>
							<view class="used_right">
								<view class="used_sta">正常</view>
								<view class="used_sta">闲置</view>
								<view class="used_sta">c(一般)</view>
								<view class="">20200726</view>
							</view>
						</view>
					</view>
					<view class="parameter_item">
						<DevTitle oneTle="设备管理" oneicon="../../static/device/设备管理.svg" twoTle="合格"
							twoicon="../../static/device/wxdian.png"></DevTitle>
						<view class="used_item">
							<view class="used_left">
								<view class="">负责人：</view>
								<view class="">所属部门：</view>
								<view class="">位置：</view>
								<view class="">是否计量设备：</view>
								<view class="">是否开启折旧：</view>
							</view>
							<view class="used_right">
								<view class="">杜元麟</view>
								<view class="">士大夫科技/水塔炼化厂/总经理办公室</view>
								<view class="">杜元麟</view>
								<view class="">是</view>
								<view class="">否</view>
							</view>
						</view>
					</view>
					<view class="parameter_item">
						<view class="par_icon icon_item">
							<view class="">
								<image src="@/static/device/计量方法.svg" mode=""></image>计量信息
							</view>
							<view class="">

							</view>
						</view>
						<view class="used_item">
							<view class="used_left">
								<view class="">计量编号：</view>
								<view class="">计量范围：</view>
								<view class="">计量点位：</view>
								<view class="">仪器精度：</view>
								<view class="">允许误差：</view>
								<view class="">管理等级：</view>
								<view class="">计量方式：</view>
								<view class="">下次计量日期：</view>
								<view class="">计量周期：</view>
								<view class="">提前提醒时间：</view>
								<view class="">负责人：</view>
							</view>
							<view class="used_right">
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
								<view class="">无</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 维修 -->
			<view class="dev_info_item dev_repair" v-if="current==1">
				<view class="repair_con device_con">
					<view class="failure">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/统计 (1).svg" mode=""></image>故障统计
							</view>
							<view class="">

							</view>
						</view>
						<view class="par_fail">
							<view class="fail_top">
								<view class="">
									<text class="fail_tle">总停机时间</text>
									<text class="fail_peo">
										<text style="color: #CAC27B;">255</text>
										<text style="color: #AEAEAE;font-size: 24rpx;">分钟</text>
									</text>
								</view>
								<view class="">
									<text class="fail_tle">故障次数</text>
									<text class="fail_peo">34</text>
								</view>
							</view>
							<view class="fail_bot">
								<view class="">
									设备故障排行：第 <text style="color: #45b7fe;">41</text> 名
								</view>
								<view class="">
									<image src="@/static/device/g-ningmeng.svg" mode=""></image>
									<image src="@/static/device/g-ningmeng.svg" mode=""></image>
									<image src="@/static/device/g-ningmeng.svg" mode=""></image>
									<text>></text>
								</view>
							</view>
						</view>
					</view>
					<view class="repair_level">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/统计 (2).svg" mode=""></image>故障等级分布
							</view>
							<view class="">

							</view>
						</view>
						<view class="level_pro pro_item">
							<view class="plan_item" style="margin-bottom: 36rpx;">
								<view class="item_tle">
									一般
								</view>
								<view class="item_per">
									82.0%
								</view>
								<view class="item_pro">
									<u-line-progress active-color="#259b24" :percent="70"></u-line-progress>
								</view>
								<view class="item_num">
									26
								</view>
							</view>
							<view class="plan_item" style="margin-bottom: 36rpx;">
								<view class="item_tle">
									严重
								</view>
								<view class="item_per">
									82.0%
								</view>
								<view class="item_pro">
									<u-line-progress active-color="#ff9800" :percent="70"></u-line-progress>
								</view>
								<view class="item_num">
									26
								</view>
							</view>
							<view class="plan_item">
								<view class="item_tle">
									紧急
								</view>
								<view class="item_per">
									82.0%
								</view>
								<view class="item_pro">
									<u-line-progress active-color="#e51c23" :percent="70"></u-line-progress>
								</view>
								<view class="item_num">
									26
								</view>
							</view>
						</view>
					</view>

					<view class="repair_type">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/统计.svg" mode=""></image>故障类型分布
							</view>
							<view class="">

							</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="pie" :opts="opts" canvasId="canvasColumn" :chartData="chartData"
								:ontouch="true" :canvas2d="true" background="none" />
						</view>
					</view>
					<view class="repair_type">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/统计分析.svg" mode=""></image>故障原因分布
							</view>
							<view class="">

							</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" canvasId="canvasColumn1" :opts="opts1"
								:chartData="chartData1" :ontouch="true" :canvas2d="true" background="none" />
						</view>
					</view>
				</view>
			</view>
			<!-- 保养 -->
			<view class="dev_info_item dev_upkeep" v-if="current==2">
				<view class="device_con upkeep_con">
					<view class="recently up_item">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/统计 (1).svg" mode=""></image>最近保养
							</view>
							<view class="">

							</view>
						</view>
						<view class="rec_time">
							<text> 2021-10-23 - 2021-11-23</text>
							<text> 月 </text>
							<text> 张如玉 </text>
						</view>
						<view class="icon_item">
							<view class="">
								<image src="" mode=""></image>下次保养
							</view>
							<view class="">

							</view>
						</view>
						<view class="rec_time next_time">
							<text> 2021-10-23 - 2021-11-23</text>
							<text> 月 </text>
							<text> 张如玉 </text>
						</view>
					</view>
					<view class="times_recent up_item">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/提示.svg" mode=""></image>今年执行情况
							</view>
							<view class="">
							</view>
						</view>
						<view class="years_pk">
							<qiun-data-charts type="column" canvasId="canvasColumnYear" :opts="optsYear1"
								:chartData="chartYear1" :ontouch="true" :canvas2d="true" background="none" />
						</view>
					</view>
					<view class="times_recent up_item">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/计量器.svg" mode=""></image>近五年保养次数对比
							</view>
							<view class="">
							</view>
						</view>
						<view class="years_pk">
							<qiun-data-charts type="column" canvasId="canvasColumn2" :opts="opts2"
								:chartData="chartData2" :ontouch="true" :canvas2d="true" background="none" />
						</view>
					</view>
					<view class="link_item up_item">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/关联设备.svg" mode=""></image>关联计划
							</view>
							<view class="">

							</view>
						</view>
						<view class="">
							<view class="itme-box">
								<view style="height: 20rpx;"></view>
								<view class="h-table h-table-info">
									<view class="h-tr h-tr-2 h-thead">
										<view class="h-td" style="color: #218ffd;">计划编号</view>
										<view class="h-td">计划名称</view>
										<view class="h-td">负责人</view>
									</view>
									<view class="h-tr h-tr-2">
										<view class="h-td" style="color: #999;">KJi3u9128312</view>
										<view class="h-td">设备保养计划</view>
										<view class="h-td">张还剩</view>
									</view>
									<view class="h-tr h-tr-2">
										<view class="h-td" style="color: #999;">KJi3u9128312</view>
										<view class="h-td">设备保养计划</view>
										<view class="h-td">张还剩</view>
									</view>
									<view class="h-tr h-tr-2">
										<view class="h-td" style="color: #999;">KJi3u9128312</view>
										<view class="h-td">设备保养计划</view>
										<view class="h-td">张还剩</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 巡检 -->
			<view class="dev_info_item dev_polling" v-if="current==3">
				<view class="device_con upkeep_con">
					<view class="up_item checking">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/地图.svg" mode=""></image>巡检统计
							</view>
							<view class="">

							</view>
						</view>
						<view class="check_item">
							<view class="">
								<text>任务总数</text>
								<text style="color: #2D2B2B;">3220</text>
							</view>
							<view class="">
								<text>已完成</text>
								<text style="color: #54B03A;">34</text>
							</view>
							<view class="">
								<text>待执行</text>
								<text style="color: #52B7F5;">320</text>
							</view>
							<view class="">
								<text>已过期</text>
								<text style="color: #FF5722;">34</text>
							</view>
						</view>
					</view>
					<view class="recently up_item">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/统计 (1).svg" mode=""></image>最近巡检
							</view>
							<view class="">

							</view>
						</view>
						<view class="rec_time">
							<text> 2021-10-23 - 2021-11-23</text>
							<text> 月 </text>
							<text> 张如玉 </text>
						</view>
						<view class="icon_item">
							<view class="">
								<image src="" mode=""></image>下次保养
							</view>
							<view class="">

							</view>
						</view>
						<view class="rec_time next_time">
							<text> 2021-10-23 - 2021-11-23</text>
							<text> 月 </text>
							<text> 张如玉 </text>
						</view>
					</view>
					<view class="times_recent up_item">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/统计.svg" mode=""></image>巡检情况
							</view>
							<view class="">
							</view>
						</view>
						<view class="years_pk">
							<qiun-data-charts type="ring" canvasId="canvasColumn3" :opts="opts3" :chartData="chartData3"
								:ontouch="true" :canvas2d="true" background="none" />
						</view>
					</view>
					<view class="link_item up_item">
						<view class="icon_item">
							<view class="">
								<image src="@/static/device/关联设备.svg" mode=""></image>关联标准
							</view>
							<view class="">

							</view>
						</view>
						<view class="">
							<view class="itme-box">
								<view style="height: 20rpx;"></view>
								<view class="h-table h-table-info">
									<view class="h-tr h-tr-2 h-thead">
										<view class="h-td" style="color: #218ffd;">标准编号</view>
										<view class="h-td">标准名称</view>
									</view>
									<view class="h-tr h-tr-2">
										<view class="h-td" style="color: #999;">KJi3u9128312</view>
										<view class="h-td">注塑机设备年度点检表</view>
									</view>
									<view class="h-tr h-tr-2">
										<view class="h-td" style="color: #999;">KJi3u9128312</view>
										<view class="h-td">辅助机器安全巡检标准</view>
									</view>
									<view class="h-tr h-tr-2">
										<view class="h-td" style="color: #999;">KJi3u9128312</view>
										<view class="h-td">关键机床巡检标准</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import DevTitle from "@/components/col-title/index.vue"

	export default {
		components: {
			DevTitle
		},
		data() {
			return {
				plantTitle: '注塑机',
				list: [{
					name: '信息总览'
				}, {
					name: '维修'
				}, {
					name: '保养'
				}, {
					name: '巡检'
				}],
				current: 0,

				chartData: {
					"series": [{
						"data": [{
								"name": "一班",
								"value": 50
							},
							{
								"name": "二班",
								"value": 30
							},
							{
								"name": "三班",
								"value": 20
							},
							{
								"name": "四班",
								"value": 18
							},
							{
								"name": "五班",
								"value": 8
							}
						]
					}]

				},
				opts: {
					"type": "pie",
					"canvasId": "0",
					"canvas2d": false,
					"background": "none",
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"color": [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc"
					],
					"padding": [
						5,
						5,
						5,
						5
					],
					"rotate": false,
					"errorReload": true,
					"fontSize": 13,
					"fontColor": "#666666",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": true,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"tapLegend": true,
					"legend": {
						"show": false,
						"position": "bottom",
						"float": "center",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 13,
						"fontColor": "#666666",
						"lineHeight": 11,
						"hiddenColor": "#CECECE",
						"itemGap": 10
					},
					"extra": {
						"pie": {
							"activeOpacity": 0,
							"activeRadius": 0,
							"offsetAngle": 0,
							"customRadius": 0,
							"labelWidth": 20,
							"border": true,
							"borderWidth": 3,
							"borderColor": "#FFFFFF",
							"linearType": "none"
						},
						"tooltip": {
							"showBox": true,
							"showArrow": true,
							"showCategory": false,
							"borderWidth": 0,
							"borderRadius": 0,
							"borderColor": "#000000",
							"borderOpacity": 0.7,
							"bgColor": "#000000",
							"bgOpacity": 0.7,
							"gridType": "solid",
							"dashLength": 4,
							"gridColor": "#CCCCCC",
							"fontColor": "#FFFFFF",
							"splitLine": true,
							"horizentalLine": false,
							"xAxisLabel": false,
							"yAxisLabel": false,
							"labelBgColor": "#FFFFFF",
							"labelBgOpacity": 0.7,
							"labelFontColor": "#666666"
						}
					}
				},
				opts1: {
					"type": "column",
					"canvasId": "1",
					"canvas2d": false,
					"background": "none",
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"color": [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc"
					],
					"padding": [
						15,
						15,
						0,
						5
					],
					"rotate": false,
					"errorReload": true,
					"fontSize": 13,
					"fontColor": "#666666",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": true,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"tapLegend": true,
					"xAxis": {
						"disabled": false,
						"axisLine": true,
						"axisLineColor": "#CCCCCC",
						"calibration": false,
						"fontColor": "#666666",
						"fontSize": 13,
						"rotateLabel": false,
						"itemCount": 5,
						"boundaryGap": "center",
						"disableGrid": true,
						"gridColor": "#CCCCCC",
						"gridType": "solid",
						"dashLength": 4,
						"gridEval": 1,
						"scrollShow": false,
						"scrollAlign": "left",
						"scrollColor": "#A6A6A6",
						"scrollBackgroundColor": "#EFEBEF",
						"format": ""
					},
					"yAxis": {
						"disabled": true,
						"disableGrid": true,
						"splitNumber": 5,
						"gridType": "solid",
						"dashLength": 8,
						"gridColor": "#CCCCCC",
						"padding": 10,
						"showTitle": false,
						"data": [{
							"type": "value",
							"position": "left",
							"disabled": false,
							"axisLine": true,
							"axisLineColor": "#CCCCCC",
							"calibration": false,
							"fontColor": "#666666",
							"fontSize": 13,
							"textAlign": "right",
							"title": "",
							"titleFontSize": 13,
							"titleOffsetY": 0,
							"titleOffsetX": 0,
							"titleFontColor": "#666666",
							"min": null,
							"max": null,
							"tofix": null,
							"unit": "",
							"format": ""
						}]
					},
					"legend": {
						"show": false,
						"position": "bottom",
						"float": "center",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 13,
						"fontColor": "#666666",
						"lineHeight": 11,
						"hiddenColor": "#CECECE",
						"itemGap": 10
					},
					"extra": {
						"column": {
							"type": "group",
							"width": 30,
							"seriesGap": 2,
							"categoryGap": 3,
							"barBorderCircle": true,
							"linearType": "none",
							"linearOpacity": 1,
							"colorStop": 0,
							"meterBorder": 1,
							"meterFillColor": "#FFFFFF",
							"activeBgColor": "#000000",
							"activeBgOpacity": 0.08,
							"meterBorde": 1
						},
						"tooltip": {
							"showBox": true,
							"showArrow": true,
							"showCategory": false,
							"borderWidth": 0,
							"borderRadius": 0,
							"borderColor": "#000000",
							"borderOpacity": 0.7,
							"bgColor": "#000000",
							"bgOpacity": 0.7,
							"gridType": "solid",
							"dashLength": 4,
							"gridColor": "#CCCCCC",
							"fontColor": "#FFFFFF",
							"splitLine": true,
							"horizentalLine": false,
							"xAxisLabel": false,
							"yAxisLabel": false,
							"labelBgColor": "#FFFFFF",
							"labelBgOpacity": 0.7,
							"labelFontColor": "#666666"
						},
						"markLine": {
							"type": "solid",
							"dashLength": 4,
							"data": []
						}
					}
				},
				chartData1: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
						"name": "目标值",
						"data": [
							35,
							36,
							31,
							33,
							13,
							34
						]
					}]
				},
				opts2: {
					"type": "area",
					"canvasId": "",
					"canvas2d": false,
					"background": "none",
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"color": [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc"
					],
					"padding": [
						15,
						15,
						0,
						15
					],
					"rotate": false,
					"errorReload": true,
					"fontSize": 13,
					"fontColor": "#666666",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": true,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"tapLegend": true,
					"xAxis": {
						"disabled": false,
						"axisLine": true,
						"axisLineColor": "#CCCCCC",
						"calibration": false,
						"fontColor": "#666666",
						"fontSize": 13,
						"rotateLabel": false,
						"itemCount": 5,
						"boundaryGap": "justify",
						"disableGrid": true,
						"gridColor": "#CCCCCC",
						"gridType": "solid",
						"dashLength": 4,
						"gridEval": 1,
						"scrollShow": false,
						"scrollAlign": "left",
						"scrollColor": "#A6A6A6",
						"scrollBackgroundColor": "#EFEBEF",
						"format": ""
					},
					"yAxis": {
						"disabled": true,
						"disableGrid": false,
						"splitNumber": 5,
						"gridType": "dash",
						"dashLength": 2,
						"gridColor": "#CCCCCC",
						"padding": 10,
						"showTitle": false,
						"data": []
					},
					"legend": {
						"show": false,
						"position": "bottom",
						"float": "center",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 13,
						"fontColor": "#666666",
						"lineHeight": 11,
						"hiddenColor": "#CECECE",
						"itemGap": 10
					},
					"extra": {
						"area": {
							"type": "curve",
							"opacity": 1,
							"addLine": true,
							"width": 2,
							"gradient": true
						},
						"tooltip": {
							"showBox": true,
							"showArrow": true,
							"showCategory": false,
							"borderWidth": 0,
							"borderRadius": 0,
							"borderColor": "#000000",
							"borderOpacity": 0.7,
							"bgColor": "#000000",
							"bgOpacity": 0.7,
							"gridType": "solid",
							"dashLength": 4,
							"gridColor": "#CCCCCC",
							"fontColor": "#FFFFFF",
							"splitLine": true,
							"horizentalLine": false,
							"xAxisLabel": false,
							"yAxisLabel": false,
							"labelBgColor": "#FFFFFF",
							"labelBgOpacity": 0.7,
							"labelFontColor": "#666666"
						},
						"markLine": {
							"type": "solid",
							"dashLength": 4,
							"data": []
						}
					}
				},
				chartData2: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
						"name": "成交量A",
						"data": [
							35,
							28,
							25,
							37,
							24,
							20
						]
					}]
				},
				chartData3: {
					"series": [{
						"data": [{
								"name": "正常",
								"value": 50
							},
							{
								"name": "异常",
								"value": 30
							},
							{
								"name": "漏检",
								"value": 20
							}
						]
					}]
				},
				opts3: {
					"ring": {
						"type": "ring",
						"canvasId": "",
						"canvas2d": false,
						"background": "none",
						"animation": true,
						"timing": "easeOut",
						"duration": 1000,
						"color": [
							"#1890FF",
							"#91CB74",
							"#FAC858",
							"#EE6666",
							"#73C0DE",
							"#3CA272",
							"#FC8452",
							"#9A60B4",
							"#ea7ccc"
						],
						"padding": [
							5,
							5,
							5,
							5
						],
						"rotate": false,
						"errorReload": true,
						"fontSize": 13,
						"fontColor": "#666666",
						"enableScroll": false,
						"touchMoveLimit": 60,
						"enableMarkLine": false,
						"dataLabel": true,
						"dataPointShape": true,
						"dataPointShapeType": "solid",
						"tapLegend": true,
						"legend": {
							"show": true,
							"position": "right",
							"float": "center",
							"padding": 0,
							"margin": 0,
							"backgroundColor": "rgba(0,0,0,0)",
							"borderColor": "rgba(0,0,0,0)",
							"borderWidth": 0,
							"fontSize": 12,
							"fontColor": "#6f6f6f",
							"lineHeight": 25,
							"hiddenColor": "#CECECE",
							"itemGap": 10
						},
						"title": {
							"name": "",
							"fontSize": 15,
							"color": "#666666",
							"offsetX": 0,
							"offsetY": 0
						},
						"subtitle": {
							"name": "",
							"fontSize": 25,
							"color": "#7cb5ec",
							"offsetX": 0,
							"offsetY": 0
						},
						"extra": {
							"ring": {
								"ringWidth": 20,
								"centerColor": "#FFFFFF",
								"activeOpacity": 0.5,
								"activeRadius": 10,
								"offsetAngle": 0,
								"customRadius": 0,
								"labelWidth": 15,
								"border": false,
								"borderWidth": 3,
								"borderColor": "#FFFFFF",
								"linearType": "none"
							},
							"tooltip": {
								"showBox": true,
								"showArrow": true,
								"showCategory": false,
								"borderWidth": 0,
								"borderRadius": 0,
								"borderColor": "#000000",
								"borderOpacity": 0.7,
								"bgColor": "#000000",
								"bgOpacity": 0.7,
								"gridType": "solid",
								"dashLength": 4,
								"gridColor": "#CCCCCC",
								"fontColor": "#FFFFFF",
								"splitLine": true,
								"horizentalLine": false,
								"xAxisLabel": false,
								"yAxisLabel": false,
								"labelBgColor": "#FFFFFF",
								"labelBgOpacity": 0.7,
								"labelFontColor": "#666666"
							}
						}
					}
				},
				chartYear1: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
						"name": "目标值",
						"data": [
							35,
							36,
							31,
							33,
							13,
							34
						]
					}]
				},
				optsYear1: {
					"column":{
					    "type": "column",
					    "canvasId": "",
					    "canvas2d": false,
					    "background": "none",
					    "animation": true,
					    "timing": "easeOut",
					    "duration": 1000,
					    "color": [
					        "#1890FF",
					        "#91CB74",
					        "#FAC858",
					        "#EE6666",
					        "#73C0DE",
					        "#3CA272",
					        "#FC8452",
					        "#9A60B4",
					        "#ea7ccc"
					    ],
					    "padding": [
					        15,
					        15,
					        0,
					        5
					    ],
					    "rotate": false,
					    "errorReload": true,
					    "fontSize": 13,
					    "fontColor": "#666666",
					    "enableScroll": false,
					    "touchMoveLimit": 60,
					    "enableMarkLine": false,
					    "dataLabel": false,
					    "dataPointShape": true,
					    "dataPointShapeType": "solid",
					    "tapLegend": true,
					    "xAxis": {
					        "disabled": true,
					        "axisLine": true,
					        "axisLineColor": "#CCCCCC",
					        "calibration": false,
					        "fontColor": "#666666",
					        "fontSize": 13,
					        "rotateLabel": false,
					        "itemCount": 5,
					        "boundaryGap": "center",
					        "disableGrid": true,
					        "gridColor": "#CCCCCC",
					        "gridType": "solid",
					        "dashLength": 4,
					        "gridEval": 1,
					        "scrollShow": false,
					        "scrollAlign": "left",
					        "scrollColor": "#A6A6A6",
					        "scrollBackgroundColor": "#EFEBEF",
					        "format": ""
					    },
					    "yAxis": {
					        "disabled": true,
					        "disableGrid": false,
					        "splitNumber": 5,
					        "gridType": "solid",
					        "dashLength": 8,
					        "gridColor": "#CCCCCC",
					        "padding": 10,
					        "showTitle": false,
					        "data": []
					    },
					    "extra": {
					        "column": {
					            "type": "group",
					            "width": 30,
					            "seriesGap": 2,
					            "categoryGap": 3,
					            "barBorderCircle": false,
					            "linearType": "none",
					            "linearOpacity": 1,
					            "colorStop": 0,
					            "meterBorder": 1,
					            "meterFillColor": "#FFFFFF",
					            "activeBgColor": "#000000",
					            "activeBgOpacity": 0.08,
					            "meterBorde": 1
					        },
					        "tooltip": {
					            "showBox": true,
					            "showArrow": true,
					            "showCategory": false,
					            "borderWidth": 0,
					            "borderRadius": 0,
					            "borderColor": "#000000",
					            "borderOpacity": 0.7,
					            "bgColor": "#000000",
					            "bgOpacity": 0.7,
					            "gridType": "solid",
					            "dashLength": 4,
					            "gridColor": "#CCCCCC",
					            "fontColor": "#FFFFFF",
					            "splitLine": true,
					            "horizentalLine": false,
					            "xAxisLabel": false,
					            "yAxisLabel": false,
					            "labelBgColor": "#FFFFFF",
					            "labelBgOpacity": 0.7,
					            "labelFontColor": "#666666"
					        },
					        "markLine": {
					            "type": "solid",
					            "dashLength": 4,
					            "data": []
					        }
					    }
					}
				}
			};
		},
		mounted() {},
		methods: {
			showBack() {
				uni.navigateBack()
			},
			confirm(e) {
				console.log(e)
			},
			tabChange(index) {
				this.current = index;
				console.log(index, 'tab点击')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin maxIconSize {
		width: 74rpx;
		height: 74rpx;
	}

	@mixin minIconSize {
		width: 40rpx;
		height: 40rpx;
	}

	.con_nav {
		/deep/ .u-border-bottom:after {
			border: none;
		}
	}

	.icon_item {
		color: #777777;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		margin-bottom: 76rpx;
		justify-content: space-between;
		padding-right: 104rpx;

		image {
			@include minIconSize;
			margin-right: 20rpx;
		}

		view {
			display: flex;
			align-items: center;
		}

		view:nth-child(2) {
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	/deep/ .u-navbar {
		background: $maincolor !important;
		color: #FFFFFF !important;
	}

	/deep/ .u-back-wrap {

		padding: 0 10rpx 0 0 !important;
	}

	.content {
		/deep/ .u-iconfont {
			display: none !important;
		}

		background: #fafafa;
		position: relative;

		.nav_con {
			width: 100%;
			display: flex;
			align-items: center;

			/deep/ .u-iconfont {
				display: block !important;
			}

			.nav_icon {
				margin-right: 10rpx;
			}
		}

		// /deep/ .u-title,.u-back-wrap{
		// 	width: 100%;
		// 	font-size: 36rpx;
		// }
		.helmet {
			position: fixed;
			width: 100%;
			z-index: 9;
			background: #fafafa;

			.devices {
				position: relative;
				z-index: 1;
				background-color: $maincolor;
				@include box_rightBot_radius(100%);
				box-sizing: border-box;
				padding: 0 44rpx;

				.dev_snum {
					padding: 12rpx 0 86rpx 0;
					font-size: 24rpx;
					color: #FFFFFF;
				}

			}

			.dev_state {
				position: relative;
				z-index: 9;
				margin: -60rpx 44rpx 44rpx 44rpx;
				@include box_shadow;
				border-radius: 24rpx;
				color: $bodyColor;
				background: #ffffff;
				padding: 80rpx 40rpx 30rpx 40rpx;
				box-sizing: border-box;

				.dev_icon {
					position: absolute;
					margin-left: calc(50% - 105rpx);
					margin-top: -140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: $maincolor;
					border-radius: 60rpx;

					width: 120rpx;
					height: 120rpx;

					image {
						width: 74rpx;
						height: 74rpx;
					}
				}

				.state_info {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.info_item {
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;

						view:nth-child(1) {
							color: #3b86f8;
							font-size: 28rpx;
						}

						view:nth-child(2) {
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}


		}

		.dev_tabs {
			margin: 300rpx 0 0 0;
			position: relative;
			// overflow-y: scroll;
			overflow: hidden;

			.tabs_nav {
				border-bottom: 2rpx solid rgba(237, 238, 242, 100);
				position: fixed;
				width: 100%;
				margin-top: -6rpx;
			}

			.device_con {
				overflow-y: scroll;
			}

			.dev_info_item {
				display: flex;
				flex-direction: column;
				padding-top: 80rpx;
			}

			.dev_msg {
				.device_state {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 74rpx 44rpx 40rpx 44rpx;
					background: #FFFFFF;

					.state_logo {
						display: flex;
						flex-direction: column;
						align-items: center;

						view:nth-child(1) {
							margin-bottom: 40rpx;
							color: #777777;
							display: flex;
							align-items: center;
							font-size: 28rpx;
						}

						view:nth-child(2) {
							font-size: 24rpx;
							background: #358aef;
							padding: 2rpx 16rpx;
							border-radius: 4rpx;
							color: #FFFFFF;
						}

						image {
							@include minIconSize;
							margin-right: 20rpx;
						}
					}

					.device_img {
						image {
							width: 336rpx;
							height: 140rpx;
						}
					}
				}

				.parameters {
					padding: 36rpx 36rpx 70rpx 36rpx;
					margin: 0 20rpx;
					background: #FFFFFF;
					display: flex;
					flex-direction: column;
					@include box_shadow;


					.par_pre {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;

						view {
							view {
								display: flex;
								flex-direction: column;
								align-items: flex-start;

								text:nth-child(1) {
									margin-bottom: 20rpx;
								}
							}

							.pre_tle {
								color: #101010;
							}

							.pre_peo {
								color: #F47600;
							}

							.pre_bra {
								color: #00C0DE;
							}
						}

						.pre_right {
							border-left: 2rpx solid #F2F3F7;
							padding-left: 24rpx;
						}
					}
				}

				.parameter_item {
					padding: 18rpx 0 20rpx 44rpx;
					background: #FFFFFF;
					border-bottom: 2rpx solid rgba(239, 239, 244, 100);

					.used_item {
						display: flex;
						justify-content: flex-start;

						view {
							font-size: 24rpx;

							view {
								margin-bottom: 20rpx;
							}
						}

						.used_left {
							width: 204rpx;

							view {
								text-align: right;
								color: #999999;
							}

							margin-right: 60rpx;
						}

						.used_right {
							view {
								text-align: left;
								color: #101010;
							}

							.used_sta {
								text-align: center;
								padding: 2rpx 0rpx;
								background: #358aef;
								border-radius: 4rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}

			// 维修
			.dev_repair {
				.repair_con {
					margin: 0 20rpx;

					.failure {
						background: #FFFFFF;
						padding: 54rpx 20rpx 20rpx 20rpx;
						box-sizing: border-box;
						border-radius: 24rpx;
						@include box_shadow;
						margin-bottom: 20rpx;

						.icon_item {
							margin-bottom: 60rpx;
						}

						.par_fail {
							display: flex;
							flex-direction: column;

							.fail_top {
								display: flex;
								align-items: center;

								border-bottom: 2rpx solid rgba(237, 238, 242, 100);
								padding-bottom: 38rpx;
								margin-bottom: 20rpx;
								box-sizing: border-box;

								view {
									display: flex;
									flex-direction: column;
								}

								view:nth-child(1) {
									margin-right: 140rpx;
								}

								.fail_tle {
									font-size: 24rpx;
									color: #545454;
									margin-bottom: 14rpx;
								}

								.fail_peo {
									display: flex;
									font-size: 48rpx;
									color: #676767;
								}
							}

							.fail_bot {
								display: flex;
								align-items: center;
								justify-content: center;

								image {
									width: 44rpx;
									height: 44rpx;
								}

								view:nth-child(1) {
									margin-right: 38rpx;
								}

								view:nth-child(2) {
									display: flex;
									align-items: center;

									text {
										color: #999898;
										font-size: 38rpx;
										font-weight: bold;
										margin-left: 10rpx;
									}
								}
							}
						}
					}

					.repair_level {
						background: #FFFFFF;
						padding: 54rpx 20rpx 20rpx 20rpx;
						box-sizing: border-box;
						border-radius: 24rpx;
						@include box_shadow;

						margin-bottom: 20rpx;

						.pro_item {
							display: flex;
							flex-direction: column;

							.plan_item {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.item_pro {
									width: 346rpx;
									margin-right: 36rpx;
								}

								.item_tle {
									font-size: 28rpx;
									color: #101010;
									margin-right: 24rpx;
								}

								.item_per,
								.item_num {
									margin-right: 24rpx;
									font-size: 28rpx;
									color: #8C8C8C;
								}

								.item_num {
									margin-right: 0rpx;
								}
							}
						}
					}

					.repair_type {
						background: #FFFFFF;
						padding: 54rpx 20rpx 20rpx 20rpx;
						box-sizing: border-box;
						border-radius: 24rpx;
						@include box_shadow;
						margin-bottom: 20rpx;

						/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
						.charts-box {
							width: 100%;
							height: 400rpx;
						}
					}
				}
			}

			// 保养
			.upkeep_con {
				margin: 0 20rpx;

				.up_item {
					margin-bottom: 20rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					border-radius: 24rpx;
					padding: 20rpx 20rpx 10rpx 20rpx;
					@include box_shadow;

					.icon_item {
						margin-bottom: 48rpx;
					}
				}

				.recently {
					.rec_time {
						padding: 14rpx;
						background: #F2F5FC;
						font-size: 24rpx;
						color: #666;
						margin: 0 0 30rpx 0;
						margin-left: 62rpx;
						display: flex;
						justify-content: space-between;
					}

					.next_time {
						background: #ECFDF3;
					}
				}

				.link_item {
					.icon_item {
						margin-bottom: 48rpx;
					}
				}

				.times_recent {
					padding-bottom: 50rpx;

					.years_pk {
						width: 100%;
						height: 270rpx;
					}
				}
			}

			.dev_polling {
				.checking {
					padding-bottom: 50rpx;

					.check_item {
						display: flex;
						justify-content: space-between;

						view {
							display: flex;
							flex-direction: column;

							text:nth-child(1) {
								font-size: 24rpx;
								color: #545454;
								margin-bottom: 14rpx;
							}

							text:nth-child(2) {
								font-size: 48rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
